import React from 'react';
import { Tooltip } from 'antd';
import PropTypes from 'prop-types';
import { LEVEL_TEXT } from '@util/constants';
import _ from 'lodash';
import './index.less';

const Top10Vuls = props => {
  let { data = [], jump } = props;

  const getPercent = (list, item) => {
    const max = _.get(list[0], 'count', 1);
    const value = _.get(item, 'count', '');
    const base = max / 10; //系数
    const percent = Math.round(value / base) || 1;
    let grids = new Array(percent).fill('');
    if (!value) {
      grids = [];
    }
    return (
      <div className="percent-bar" onClick={() => jump(item)}>
        {grids.map(index => {
          return <div className="percent-grid" key={index} />;
        })}
      </div>
    );
  };

  return (
    <div className="top10-vuls">
      {data.length ? (
        data.map(item => {
          const orgName = _.get(item, 'site.organization.parentNames', []).concat([
            _.get(item, 'site.organization.name')
          ]);
          const id = _.get(item, '_id', '');
          const name = _.get(item, 'name', '暂无数据');
          const level = _.get(item, 'level', '');
          const count = _.get(item, 'count', '');
          const ip = _.get(item, 'site.ip', '');
          const url = _.get(item, 'site.url', '');
          const organization = _.get(item, 'site.organization', '');

          const tips = (
            <div>
              漏洞名称： {name}
              <br />
              等级： {LEVEL_TEXT[level]}
              <br />
              影响资产数： {count}
              <br />
              资产示例： {ip}
              {url && `(${url})`}
              <br />
              {organization && `示例资产所属部门：${orgName.join('-')}`}
            </div>
          );
          return (
            <div className="vuls-item" key={id}>
              <Tooltip title={id && tips} overlayClassName="top10-vuls-tooltip">
                {getPercent(data, item)}
              </Tooltip>
              <div className={`vuls-name ${level}`} onClick={() => jump(item)}>
                {name}
              </div>
            </div>
          );
        })
      ) : (
        <div className="top10-vuls-empty">暂无数据</div>
      )}
    </div>
  );
};

Top10Vuls.propTypes = {
  data: PropTypes.array,
  jump: PropTypes.func
};

export default Top10Vuls;
